<template>
  <div>

    <Select
        v-model="searchName"
        filterable
        remote
        :remote-method="search"
        :loading="searchLoading"
        :table-type="tableType"
    >
        <Option v-for="(option, index) in selectList" :value="option.value" :key="index">{{option.label}}</Option>
    </Select>
  </div>
</template>
<script>
  export default {
    //tableType:表格类型,比如工商信息,税务信息
    props:{tableType:String},
    data () {
      return {
        //搜索关键字
        searchName:'',
        //搜索框加载中
        searchLoading:false,
        //匹配列表
        selectList:[],
        //模拟搜索公司列表
        companyDataList: [
          '中国', '中铁十三局', '精略财税', '京东', '淘宝', '笔记本电脑', '社会主义核心价值观', '哦哦哦', '嗷嗷嗷啊', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'
        ],
      }
    },
    methods: {
      //判断表格是那种类型

      //搜索框搜索方法
      //query：框中的值
      search (query) {
        //判断是那个表格调用这个组件
        //如果不为空进行下面操作
        if(query !== ''){
          //出现正在加载
          this.searchLoading = true;
          //发送请求获取companyDataList的值
          console.log(this.tableType);
          var that = this;
          this.$http.get(that.tableType).then(res=>{
            this.companyDataList = res.data.data;
          }).catch(err=>{
            console.log(err);
          });
          //设置200毫秒后正在加载消失
          setTimeout(()=>{
            this.searchLoading = false;
            //将全部公司名称列表暂时存到list里面
            const list = this.companyDataList.map((item)=>{
              return {
                value:item,
                label:item
              }
            })
            //检测list的每一项是否和query匹配,若匹配就存到selectList（显式在下面的列表中）
            this.selectList = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) !==- 1);
          },200);

        }else{
          //若为空，则匹配列表为空
          this.selectList = []
        }
      },
      searchCom(){
        console.log(this.searchName);
        //发射this.$emit('child-fun',data);
      }
    }
  }
</script>
